<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/1/13
  Time: 17:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        智慧营销系统
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/admin/css/x-admin.css" media="all">
    <link rel="stylesheet" href="/admin/lib/bootstrap/css/bootstrap.css" media="all">
    <link rel="stylesheet" href="/admin/lib/bootstrap/js/bootstrap.min.js" media="all">
</head>
<body>
<style type="text/css">
    legend { display: block; width:100px; border-bottom:0px; font-family: "Microsoft YaHei","Helvetica Neue";}
    legend a{ color:#666;} legend a:hover{ text-decoration:none;}
    .layui-table{ font-family: "Microsoft YaHei","Helvetica Neue";}
</style>
<div class="x-body">
    <blockquote class="layui-elem-quote">
        欢迎使用！<span class="f-14">v1.0</span> &nbsp;&nbsp;登录次数：${statistics.loginCount}
    </blockquote>
    <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-blue" onclick="addMemberTab()"> <i class="fa fa-address-card"></i>
                </div>
                <div class="value tab-menu" bind="1" lay-filter="x-tab" lay-allowclose="true">
                    <a onclick="addMemberTab()" data-url="user-info.html" data-parent="true" data-title="会员人数"><i class="iconfont " data-icon=""></i>
                        <h1>${statistics.memberCount}</h1>
                    </a>

                    <a  onclick="addMemberTab()" data-url="user-info.html" data-parent="true" data-title="会员人数"> <i class="iconfont " data-icon=""></i><span>会员人数</span></a>

                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div onclick="addMemberTab()" class="symbol bgcolor-commred"> <i class="fa fa-handshake-o"></i>
                </div>
                <div class="value tab-menu" bind="1" lay-filter="demo">
                    <a onclick="addMemberTab()" href="javascript:;" data-url="user-info.html" data-parent="true" data-title="VIP会员"> <i class="iconfont " data-icon=""></i>
                        <h1>${statistics.membeVIPrCount}</h1>
                    </a>

                    <a onclick="addMemberTab()" href="javascript:;" data-url="user-info.html" data-parent="true" data-title="VIP会员"> <i class="iconfont " data-icon=""></i><span>VIP会员</span></a>

                </div>
            </section>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-dark-green" onclick="addOrderTab()"> <i class="fa fa-bar-chart"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a onclick="addOrderTab()" href="javascript:;" data-url="user-info.html" data-parent="true" data-title="订单总数"> <i class="iconfont " data-icon=""></i>
                        <h1>${statistics.orderCount}</h1>
                    </a>
                    <a onclick="addOrderTab()" href="javascript:;" data-url="user-info.html" data-parent="true" data-title="订单总数"> <i class="iconfont " data-icon=""></i><span>订单总数</span></a>
                </div>
            </section>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-yellow-green" onclick="addOrderTab()"> <i class="fa fa-cubes"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a onclick="addOrderTab()" href="javascript:;" data-url="user-info.html" data-parent="true" data-title="今日新增订单"> <i class="iconfont " data-icon=""></i>
                        <h1>${statistics.orderTodayCount}</h1>
                    </a>
                    <a onclick="addOrderTab()" href="javascript:;" data-url="user-info.html" data-parent="true" data-title="今日新增订单"> <i class="iconfont " data-icon=""></i><span>今日新增订单</span></a>
                </div>
            </section>
        </div>

    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
        <legend><a name="default">信息统计</a></legend>
    </fieldset>

    <!--相关统计-->
    <div class="row">
        <!--<div class="col-sm-6">-->
        <!--<section class="panel">-->
        <!--<div class="panel-heading">区域统计</div>-->
        <!--<div class="panel-body">-->
        <!--<div class="echarts" id="area" style="height:300px; height:350px"></div>-->
        <!--</div>-->
        <!--</section>-->
        <!--</div>-->

        <div class="col-sm-6" style="width:100%;">
            <section class="panel">
                <div class="panel-heading">一周统计</div>
                <div class="panel-body">
                    <div class="echarts" id="main" style="width:100%; height:350px"></div>
                </div>
            </section>
        </div>

        <div class="col-sm-6">
            <section class="panel">
                <div class="panel-heading">年度统计</div>
                <div class="panel-body">
                    <div class="echarts" id="years" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>
        <div class="col-sm-6">
            <section class="panel">
                <div class="panel-heading">产品统计</div>
                <div class="panel-body">
                    <div class="echarts" id="product" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>
    </div>

    <script src="/admin/lib/layui/layui.js" charset="utf-8"></script>
    <%--<script src="/admin/js/js/index.js"></script>--%>
    <script src="/admin/js/echarts.min.js"></script>
    <%--<script src="/admin/js/echart.js"></script>--%>
    <script>
        var element;
        var coun =0;
        layui.use(['element','layer'], function(){
             element = parent.layui.element();
            });
        /*增加会员tab*/
        function addMemberTab() {
            console.log("会员列表tab")
                element.tabAdd('x-tab', {
                    title: '会员列表',  //用于演示
                    content: '<iframe frameborder="0" src="/member/memberList" class="x-iframe"></iframe>'
                });

            var parInp = parent.$(".layui-tab-title li");
            element.tabChange('x-tab', (parInp.length)-1);
        }
        /*增加订单tab*/
        function addOrderTab() {
            console.log("会员列表tab")
            element.tabAdd('x-tab', {
                title: '商城订单',  //用于演示
                content: '<iframe frameborder="0" src="/order/shopPayList" class="x-iframe"></iframe>'
            });
            var parInp = parent.$(".layui-tab-title li");
            element.tabChange('x-tab', (parInp.length)-1);
        }


    </script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['订单','新增会员','提现申请',]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [
                    <c:forEach items="${statistics.brokenLineRecord.dateList}" var="dateList">
                    ,'${dateList}'
                    </c:forEach>

                ]
            },

            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'订单',
                    type:'line',
                    stack: '总量',
                    data:[
                        <c:forEach items="${statistics.brokenLineRecord.orderList}" var="orderList">
                        ,'${orderList.number}'
                        </c:forEach>
                    ]
                },
                {
                    name:'新增会员',
                    type:'line',
                    stack: '总量',
                    data:[
                        <c:forEach items="${statistics.brokenLineRecord.memberList}" var="memberList">
                        ,'${memberList.number}'
                        </c:forEach>
                    ]
                },
                {
                    name:'提现申请',
                    type:'line',
                    stack: '总量',
                    data:[
                        15, 23, 20, 14, 10, 30, 10, 13, 11, 14, 70, 23, 210

                    ]
                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        // 指定图表的配置项和数据
        //var myChart = echarts.init(document.getElementById('area'));

        // // 指定图表的配置项和数据
        // var option = {
        //     title: {
        //         text: '地区订单统计',
        //         subtext: '',
        //         x: 'center'
        //     },
        //     tooltip: {
        //         trigger: 'item',
        //         formatter: "{a} <br/>{b} : {c} ({d}%)"
        //     },
        //     legend: {
        //         orient: 'vertical',
        //         left: 'left',
        //         data: ['广州', '佛山', '东莞', '中山', '深圳']
        //     },
        //     series: [{
        //         name: '地区会员数量',
        //         type: 'pie',
        //         radius: '55%',
        //         center: ['50%', '60%'],
        //         data: [
        //             { value: 6335, name: '广州' },
        //             { value: 4310, name: '佛山' },
        //             { value: 2310, name: '东莞' },
        //             { value: 3310, name: '中山' },
        //             { value: 9310, name: '深圳' }
        //         ],
        //         itemStyle: {
        //             emphasis: {
        //                 shadowBlur: 10,
        //                 shadowOffsetX: 0,f
        //                 shadowColor: 'rgba(0, 0, 0, 0.5)'
        //             }
        //         }
        //     }]
        // };
        // 使用刚指定的配置项和数据显示图表。
        //myChart.setOption(option);
    </script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('years'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '年度订单统计',
                subtext: '',
                x: 'center'
            },
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: [
                    <%--<c:forEach items="${statistics.yearStatistics}" var="month" begin="0" end="1">--%>
                    <%--'001'--%>
                    <%--</c:forEach>--%>
                    <c:forEach items="${statistics.yearStatistics}" var="month" >
                    ,'${month.month}'
                    </c:forEach>
                ],
                axisTick: {
                    alignWithLabel: true
                }
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: '订单数',
                type: 'bar',
                barWidth: '80%',
                data: [
                    <c:forEach items="${statistics.yearStatistics}" var="month">
                    ,'${month.number}'
                    </c:forEach>
                ]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('product'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '产品订单比例',
                subtext: '',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: [
                    <c:forEach items="${statistics.commodityOrderStatistics}" var="commodityOrder" end="0">
                    '${commodityOrder.commodityName}'
                    </c:forEach>
                    <c:forEach items="${statistics.commodityOrderStatistics}" var="commodityOrder"  begin="1">
                    ,'${commodityOrder.commodityName}'
                    </c:forEach>
                ]
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    <c:forEach items="${statistics.commodityOrderStatistics}" var="commodityOrder" end="0">
                        { value: ${commodityOrder.number}, name: '${commodityOrder.commodityName}' }
                    </c:forEach>
                    <c:forEach items="${statistics.commodityOrderStatistics}" var="commodityOrder" begin="1">
                    ,{ value: ${commodityOrder.number}, name: '${commodityOrder.commodityName}' }
                    </c:forEach>
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

</div>
<div class="layui-footer footer footer-demo">
    <div class="layui-main">
        <p>
            <a href="/">

            </a>
        </p>

    </div>
</div>

</body>
</html>
